<template>
	<view class="page" v-if="user">
		<uni-header show-back title="订单明细" color="#F7F7F7"></uni-header>
		<view class="main-body">
			<view class="wallet-box">
				<view class="box-title">当前余额</view>
				<view class="amount iconfont icon-box" v-if="user.wallet > 10000">{{user.wallet/10000 | scale(2)}} <text class="amount-unit">w Tokens</text></view>
				<view class="amount iconfont icon-box" v-else>{{user.wallet}}<text class="amount-unit"> Tokens</text></view>
				<view class="btn btn-recharge"  @click="recharge">去充值</view>
			</view>
			<uni-scroller
				:triggered="triggered"
				background="#EFF0F1"
				@refresh="onRefresh" 
				@lower="lower"
				:infiniteStatus="infiniteStatus"
				class="scroller">
				<view class="order-list">
					<view class="order-item" v-for="(item, idx) in items" :key="idx">
						<view class="order-item-head">
							<view class="order-id">订单号：{{item.id}}</view>
							<view class="order-status status-complete">已完成</view>
						</view>
						<view class="order-item-body">
							<view class="row">
								<view class="label">消耗原因：</view>
								<view class="value">{{item.title}}</view>
							</view>
							<view class="row">
								<view class="label">使用模型：</view>
								<view class="value">{{item.title}}</view>
							</view>
							<view class="row time-row">
								<view class="label">时间：</view>
								<view class="value">{{item.create_time}}</view>
							</view>
						</view>
						<view class="order-item-foot">
							<view class="label">结算Token</view>
							<view class="sum">
								<view class="sum-label">总计：</view>
								<view class="sum-value">-{{item.tokens}}</view>
							</view>
						</view>
					</view>
					
					<uni-empty class="empty-box" v-if="items && items.length == 0"></uni-empty>
					
				</view>
				<uni-loading v-show="loading"></uni-loading>
				
			</uni-scroller>
			
		</view>
		
	</view>
	<uni-loading v-else></uni-loading>
</template>
<script>
	export default {
		data() {
			return {
				user: null,
				submitting: false,
				items:null,
				loadMoreStatus: 0,
				page: 1,
				size: 20,
				total: -1,
				loading: false,
				reachBottom: false,
				infiniteStatus: 0,
				triggered: false,
			}
		},
		onLoad(options) {
			console.log(this.methodOptions);
			
		},
		
		onShow() {
			console.log("onShow")
			this.initData();
			this.loadData();
		},
		watch:{
			customAmount(newVal, oldVal){
				if(newVal){
					this.selectedAmount = null;
				}
			}
		},
		methods: {
			initData(){
				this.$api.userService.info().then(res => {
					this.user = res;
				})
			},
			/**
			 * 充值
			 */
			recharge(){
				uni.navigateTo({
					url:"/pages/common/recharge"
				})
			},
			loadData(){
				var query = {
					page: this.page,
					size: this.size,
					order_by:'create_time desc'
				}
	
			
				
				
				
				
				this.$api.tokenOrderService.findPage(query).then(res => {
					this.total = res.total;
					var items = res.items;
					let list = this.items || [];
					if(this.page == 1){
						list = [];
					}
					
					if(items.length < this.size && this.total != 0){
						this.infiniteStatus = -1
					}
					// 不满一页
					if(this.page == 1 && (this.total < 5 || this.total == -1)){
						this.infiniteStatus = -2;
					}
					
					list = list.concat(items);
					this.items = global.unique(list);
					
					if(items.length == 0){
						if(this.items.length > 10){
							this.loadMoreStatus = -1
						}
						else{
							this.loadMoreStatus = -2
						}
					}
				}).finally(() =>{
					global.hideLoading();
				
					this._freshing = false;
					this.triggered = false;
					this.reachBottom = false;
					this.loading = false;
					if(this.loadMoreStatus == 1){
						this.loadMoreStatus = 0;
					}
				});
			},
			/**
			 * 刷新
			 */
			onRefresh(){
				if (this._freshing) return;
				this._freshing = true;
				this.triggered = true;
				this.page = 1;
				this.loadData();
			},
			
			/**
			 * 加载更多
			 * @param {Object} e
			 */
			lower(e) {
				if(this.reachBottom || this.infiniteStatus < 0){
					
					return;
				}
				this.reachBottom = true;
				this.infiniteStatus = 1;
				this.page = this.page +1;
				
				this.loadData();
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		display: flex;
		flex-direction: column;
	}
	.main-body{
		flex:1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}
	
	.wallet-box{
		width: 666rpx;
		height: 254rpx;
		background: #86DFBA;
		border-radius: 20rpx;
		margin:40rpx auto 0;
		color: #FFFFFF;
		padding:48rpx 40rpx;
		box-sizing: border-box;
		position: relative;
		
		.box-title{
			font-size: 30rpx;
			line-height: 42rpx;
		}
		.amount{
			margin-top: 40rpx;
			font-size: 56rpx;
			.amount-unit{
				font-size: 40rpx;
				margin-left: 10rpx;
			}
		}
		
		.btn-recharge{
			position: absolute;
			right: 0;
			
			height: 90rpx;
			line-height: 90rpx;
			padding: 0 34rpx;
			border-radius: 45rpx 0 0 45rpx;
			top:50%;
			margin-top:-45rpx;
			font-size: 30rpx;
			color:#677A3F;
			background: rgba(255,255,255,0.3);
		}
	}
	
	.empty-box{
		background-color: rgba(255, 255, 255, 0.05);
		width: 670rpx;
		margin:40rpx auto 0;
		border-radius: 20rpx;
		padding-bottom: 160rpx;
		
	}
	
	.scroller{
		flex: 1;
		overflow: hidden;
		background-color: #343541;

	}
	.order-list{
		padding:20rpx 0 40rpx;
	}
	.order-item{
		width: 670rpx;
		margin: 20rpx auto 0;
		background: rgba(255,255,255,0.05);
		border-radius: 20rpx;
		color:#FFFFFF;
		
		.order-item-head{
			height: 76rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 26rpx;
			padding:0 40rpx;
			border-bottom:1rpx solid rgba(234,234,234,0.05);
			position: relative;
			&:before{
				content: '';
				display: block;
				width: 8rpx;
				height: 24rpx;
				position: absolute;
				top:50%;
				left:0;
				margin-top: -12rpx;
				background-color:$uni-color-primary;
			}
			
			.status-complete{
				color:$uni-color-primary;
			}
		}
		
		.order-item-body{
			padding:10rpx 40rpx;
			.row{
				display: flex;
				line-height: 62rpx;
				
				.label{
					color:#E0E0E0;
					font-size: 26rpx;
				}
				.value{
					font-size: 28rpx;
				}
			}
			
			.time-row{
				.label,.value{
					color:#9E9E9E;
				}
			}
		}
		
		.order-item-foot{
			height: 82rpx;
			border-top:1rpx solid rgba(234,234,234,0.05);
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding:0 40rpx;
			box-sizing: border-box;
			
			.sum{
				display: flex;
				.sum-label{
				}
				.sum-value{
					color:#ED3D3D;
				}
			}
		}

	}
	
	
</style>
